
#menu{
  position:fixed;
  height:100%;
  right:-400px;
  top:0px;
  width:400px;
  transition: all .3s ease-in;
  z-index: 900;

  &.active{
    right:0;
    z-index: 999;
  }

  #menu-toggle{
    display: inline-block;
    float:left;
    margin-top:70px;
    background:url(../img/lanuch/menu-icon.png) no-repeat 50% 75% #000;
    width: 60px;
    height: 60px;
    margin-left: -100px;
    transition: all .3s;
    color: #fff;
    text-align: center;
    padding-top: 4px;
    &:hover{
      transform: scale(1.2);
    }
    &.active{
      background:url(../img/lanuch/close-icon.png) no-repeat 50% 85% #000;
    }
  }

  .menu-outer{
    background:#000;
    margin-left:50px;
    padding-left:70px;
    color:#fff;
    height: 100%;
    position: relative;

    .txt-png{
      margin-top:70px;
    }
    .menu-lst{
      margin-top:50%;
      li{
        padding:15px 0;
      }
      a{
        font-size:12px;
        display: block;
        color: #fff;
        text-decoration: none;
      }
    }

    .social-icon{
      position: absolute;
      bottom:50px;
      a{
        display:inline-block;
        height: 36px;
        width: 36px;
      }
      .weixin{
        background:url(../img/lanuch/weixin-icon.png) no-repeat;
      }
      .weibo{
        background:url(../img/lanuch/weibo-icon.png) no-repeat;
      }
      .tmall{
        background:url(../img/lanuch/tmall-icon.png) no-repeat;
      }
    }
  }//.menu-outer
}